<template>
  <div class="exchange-table">
    <div class="table">
      <n-data-table
        :columns="columns"
        :data="tableInfo.tableData"
        :pagination="false"
        :bordered="false"
      />
    </div>
    <div class="pagination">
      <n-pagination
        v-model:page="tableInfo.queryForm.pageNo"
        :page-count="tableInfo.total"
        :page-sizes="tableInfo.pageSizes"
        show-quick-jumper
        show-size-picker
        @updatePage="pageChange"
        @updatePageSize="sizeChange"
      ></n-pagination>
    </div>
  </div>
</template>
<script setup lang="ts">
import { NDataTable, NPagination } from 'naive-ui'
import type { DataTableColumns } from 'naive-ui'
import { useApi } from '@/hooks/useApi'
const { tableInfo, pageChange, sizeChange } = useApi({
  isPaging: true,
  isRequest: true,
  getData: async () => {
    return {
      code: 0,
      data: {
        total: 0,
        data: []
      }
    }
  },
  initForm: {
    type: 'EXCHANGE',
    startTime: '',
    endTime: '',
    oneCategoryId: ''
  }
})
const columns: DataTableColumns = [
  {
    title: '兑换软妹币数量',
    key: 'exchangeGold'
  },
  {
    title: '消耗收益金额',
    key: 'money'
  },
  {
    title: '状态',
    key: 'status'
  },
  {
    title: '兑换时间',
    key: 'createTime'
  }
]
</script>

<style scoped lang="scss">
.exchange-table {
  .table {
    margin-top: 21px;
  }
  .pagination {
    padding: 20px;
    display: flex;
    justify-content: center;
  }
}
</style>
